<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常用事物和绑定</title>
		<!-- 1.按钮和DIV的单击事件（三种绑定方式） -->
		<div id="div1" onclick="clickDiv1()" style="width: 400px; height: 100px; background-color: aquamarine; ">
			div1部分
		</div>
		<div id="div2" style="width: 400px; height: 100px;;background-color: cornflowerblue;">
			div2部分
		</div>
		<div id="div3" style="width: 400px; height: 100px;background-color: bisque;">
			div3部分
		</div>
		<!-- 2. 300px*300px的DIV 进入事件，离开事件，移动事件（三种绑定方式） -->
		<div id="div4" style="width: 300px; height: 300px; background-color: coral;"
		onmouseenter="enter()" onmouseleave="leave()" onmousemove="move()">
			div4部分
		</div>
	    <!-- 3.登入页面 -->
		<div id="div5" style="background-color: cyan; width: 400px;">
			<form action="" method="post">
				<table border="0" cellspacing="" cellpadding="">
					<tr>
						<td>
							用户名：
						</td>
						<td>
							<!-- 用户名输入框 -->
							 <!-- 3.1 用户名框获取焦点事件，控制台输出：用户在输入名称 -->
							 <!-- 3.2  用户名框失去焦点事件，判断是否有输入文字，没有则alert没有输入用户名 -->
							<input type="text" name="userName" id="name" onfocus="getFocusUser()" onblur="loseFocusUser()" />
						</td>
					</tr>
					<tr>
						<td>
							密码：
						</td>
						<td>
							<!-- 密码输入框，
							3.3  密码框获取焦点事件，控制台输出：用户在输入密码
							 3.4  密码框失去焦点事件，判断是否有输入文字，没有则alert没有输入密码 -->
							<input type="password" id="pwd" onfocus="getFocusPwd()" onblur="loseFocusPwd()" value=""/>
						</td>
					</tr>
					<tr>
						<td colspan="2">
							<!-- 提交按钮
							3.5 点击提交按钮，判断用户和密码是否为空。用户名为空，提示‘用户名为空’；
							密码为空，提示‘密码为空’；均为空，则提示‘用户名和密码为空’ -->
							<button type="button" id="btn1" onclick="btn()">提交</button>
						</td>
					</tr>
				</table>
			</form>
		</div>
		<!-- 4.实现DIV 鼠标移动事件，采用监听器方式操作，可实现添加和清除监听器功能。 -->
		<div id="div6" style="width: 400px;background-color: darkorange;">
			<button type="button" id="dy">开始打印</button>
			<button type="button" onclick="add()">添加监听器</button>
			<button type="button" onclick="clear();">清除监听器</button>
		</div>
	</head>
	<body>
	</body>
	<script type="text/javascript">
	    // 1.按钮和DIV的单击事件（三种绑定方式）
		function clickDiv1(){
			console.log('你单击了一次div1部分。')
		}
		document.getElementById('div2').onclick=function(){
			console.log('你单击了一次div2部分。')
		}
		function clickDiv3(){
			console.log('你单击了一次div3部分。')
		}
		document.getElementById('div3').onclick=clickDiv3;
		// 2. 300px*300px的DIV 进入事件，离开事件，移动事件（三种绑定方式）
		function enter(){
			console.log('进入div4部分')
		}
		function leave(){
			console.log('离开div4部分')
		}
		function move(){
			console.log('在div4部分上移动')
		}
		// 3.登入页面
		// 用户名输入框，
		// 密码输入框，
		// 提交按钮
		// 任务   3.1 用户名框获取焦点事件，控制台输出：用户在输入名称
		function getFocusUser(){
			console.log('用户在输入名称')
		}
		//          3.2  用户名框失去焦点事件，判断是否有输入文字，没有则alert没有输入用户名
		function loseFocusUser(){
			var userValues=document.getElementById('name');
			if(userValues.value==''){
				console.log('alert没有输入用户名');
			}else{
				console.log(userValues.value)
			}
		}
		//          3.3  密码框获取焦点事件，控制台输出：用户在输入密码
		function getFocusPwd(){
			console.log('用户在输入密码')
		}
		//          3.4  密码框失去焦点事件，判断是否有输入文字，没有则alert没有输入密码
		function loseFocusPwd(){
			var pwdValues=document.getElementById('pwd');
			if(pwdValues.value==''){
				console.log('没有输入密码')
			}else{
				console.log(pwdValues)
			}
		}
		//          3.5 点击提交按钮，判断用户和密码是否为空。用户名为空，提示‘用户名为空’；
		//               密码为空，提示‘密码为空’；均为空，则提示‘用户名和密码为空’
		function btn(){
			if (pwdValues.value=='' && userValues.value=='') {
				console.log('用户名和密码为空')
			} else if(pwdValues.value!='' && userValues.value==''){
				console.log('用户名为空')
			}else {
				console.log('密码为空')
			}
			
		}
		// 4.实现DIV 鼠标移动事件，采用监听器方式操作，可实现添加和清除监听器功能。
		function operation(){
			console.log('开始打印')
		}
		function add(){
			document.getElementById('dy').addEventListener('click',operation)
			console.log('添加成功')
		}
		function clear(){
			console.log('清除成功')
					document.getElementById('dy').removeEventListener('click',operation)
					
				}
	</script>
</html>
